<template>
  <div class="wrap">
    <img src="./assets/bg.jpg" alt="">
    <div id="app">
      <div id="nav">
        <!-- 头部组件 -->
        <Top/>
        <!-- content -->
        <Content/>
        <!-- 底部 -->
        <Bottom class="nav-bottom"/>
      </div>
    </div>
  </div>
</template>
<script>
// import Top from './components/Top';
import Top from './components/Top.vue';
import Content from './views/Content.vue';
import Bottom from './components/Bottom.vue';
export default {
  components: {
    Top,
    Content,
    Bottom
  }
}
</script>

<style scoped lang="less">
.wrap{
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  
  img{
    width: 100%;
    height: 100%;
    filter: blur(50px);
  }
  #app{
    position: absolute;
    top: 50px;
    left: 140px;
    height: 600px;
    width: 1300px;
    #nav{
      width: 1300px;
      height: 100%;
      margin: 0 auto;
      overflow: hidden;
      background-color: white;
	  // padding-bottom: 60px;
      .nav-bottom{
        position: absolute;
        left: 0;
        bottom: -60px;
      }  
    }
  }
}
</style>
